<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件捕获</title>
  <style>
    #root{
      width: 200px;
      height: 200px;
      border: 1px solid #666666;
    }
    .target{
      width: 100px;
      height: 100px;
      margin: 50px auto;
      border: 1px solid #666666;
    }
    #phase{
      width: 200px;
      height: 200px;
      border: 1px solid #666666;
    }
  </style>
</head>
<body>
  <div id="root">
    123
    <p class="target">456</p>
  </div>
  <div id="phase">
    事件阶段
  </div>
  <script>
    let root = document.querySelectorAll("#root")[0]
    let target = document.querySelectorAll(".target")[0]
    root.onclick = function (e) {
      console.log(e.type)
      // alert(1)
      // console.log("事件冒泡")
      // console.error('事件冒泡')
    }
    target.onclick = function(e){
      console.log(e.target.innerText)
      // alert(2)
      // console.log("目标事件")
    }

    let phase = document.querySelectorAll("#phase")[0]
    phase.onclick = function (e) {
      console.log("1",e.eventPhase)
    }
    document.body.addEventListener("click",function (e) {
      console.log("2",e.eventPhase)
    },true)
    document.body.onclick = function (e) {
      console.log("3",e.eventPhase)
    }
  </script>
</body>
</html>